<!--
 * @Author: 宋杰
 * @Date: 2021-01-08 02:00:22
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-16 09:10:32
 * @Description: 一家十一口(猜一字) 左下 用户职业 重写
-->
<template>
  <div class="divBox">
    <!-- 标签 -->
    <div class="titleBox">
      <div>用户职业</div>
    </div>
    <div class="divCon">
      <div id="lowerLeft" style="width:100%; height: 100%;"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chart: null,
      data: [220, 182, 191, 234, 290, 330, 450],
    };
  },
  created() {},
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      this.chart = this.$echarts.init(document.getElementById("lowerLeft"));
      this.chart.setOption({
        color: ["#32C5FF"],
        tooltip: {},
        // legend: {
        //   orient: "vertical", // 'vertical'
        //   x: "right",
        //   y: "top",
        //   itemWidth: 14,
        //   itemHeight: 7,
        //   icon: "pin",
        //   data: ["城镇用户", "非城镇用户"],
        // },
        grid: {
          left: "15%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            show: true,
            splitLine: {
              color: "rgba(255, 255, 2555, 0.5)",
            },
          },
          splitLine: {
            show: false,
          },
          nameTextStyle: {
            color: "rgba(250,250,250, 0.5)",
            fontWeight: "bold",
            align: "right",
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.5)",
            interval: 0,
            formatter: function(value) {
              return value.split("").join("\n");
            },
          },
          axisTick: {
            show: false,
          },
          name: "日期",
          nameLocation: "start",
          data: ["保险", "保险", "保险", "保险", "保险", "保险", "保险"],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            splitLine: {
              color: "rgba(255, 255, 255, 0.5)",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(255, 255, 255, 0.5)",
            },
          },
          nameTextStyle: {
            color: "rgba(250,250,250, 0.5)",
            fontWeight: "bold",
            align: "left",
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.5)",
          },
          name: "各行业人数(万人)",
          nameLocation: "end",
        }, // 直角坐标系 Y 轴
        series: [
          {
            name: "保险",
            type: "bar",
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: [10, 10, 0, 0],
            },
            emphasis: {
              itemStyle: {},
            },
            barWidth: "50%", //柱图宽度
            data: this.data,
          },
        ],
      });
    },
  },
  destroyed() {
    window.onresize = null;
  },
};
</script>
<style lang="scss" scoped>
.divBox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
// 标签
.titleBox {
  font-family: PingFangSC-Regular;
  font-size: 0.3rem;
  color: #75bdff;
  letter-spacing: 0.015rem;
  text-align: left;
  line-height: 0.5rem;
  height: 0.5rem;
  width: 100%;
  background: url("../../assets/heng2.png") no-repeat;
  background-size: 100% 40%;
  background-position: right 0 bottom 0;
}
.divCon {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
